<template>
  <div class="bets-manage">
    <div class="box-top">
      <el-form>
        <el-form-item label="手机号码">
          <el-input clearable placeholder="请输入手机号码" v-model="searchForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker clearable v-model="searchForm.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="currentPage=1;init()">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-table">
      <el-table v-loading="loading" border :data="tableData" tooltip-effect="dark">
        <el-table-column align="center" prop="nickname" label="会员帐户" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="下注赛程" show-overflow-tooltip width="260">
          <template slot-scope="scope">
            <div class="xiazhu-saicheng" v-for="(item, i) in scope.row.order_sports" :key="i">
              <span>{{`${i+1} ${item.team_team_name}VS${item.guest_team_name}`}}</span>
              <!-- <span class="xiazhu-saicheng-span-2">{{`${item.concede_num} 球 ${item.concede_num > 0 ? '正' : '负'}`}}</span>
              <span>{{item.bonus_rate}}</span> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bet_rate" label="下注倍数" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="total_price" label="下注金额" show-overflow-tooltip :sortable="true"></el-table-column>
        <el-table-column align="center" prop="theory_min_price" label="最低奖金" show-overflow-tooltip :sortable="true"></el-table-column>
        <el-table-column align="center" prop="theory_max_price" label="最高奖金" show-overflow-tooltip :sortable="true"></el-table-column>
        <el-table-column align="center" label="赛果" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="sai-guo">
              <div class="sai-guo-div" v-for="(item, i) in scope.row.order_sports" :key="i">
                <div v-for="(subItem, n) in item.play_list" :key="n">
                  <div v-for="(subSubItem, key) in subItem.bet_list" :key="key">{{subSubItem.bet_raw}}</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="投注" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="sai-guo">
              <div class="sai-guo-div" v-for="(item, i) in scope.row.order_sports" :key="i">
                <div v-for="(subItem, n) in item.play_list" :key="n">
                  <div v-for="(subSubItem, key) in subItem.bet_list" :key="key">
                    <div>{{subSubItem.bet}}</div>
                    <div>{{subSubItem.bonus_rate}}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="total_bonus_price" label="实际奖金" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="create_time" label="下注时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="下注选项" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="sai-guo">
              <div class="sai-guo-div" v-for="(item, i) in scope.row.mode_list" :key="i">
                    <div>{{item}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="state_name" label="状态" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'BetsManage',
  data () {
    return {
      loading: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      searchForm: {
        mobile: '',
        time: ['', '']
      },
      tableData: [],
      sort: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    ...mapActions({
      getInitData: 'orderManage/getOrderList'
    }),
    init () {
      const { mobile, time } = this.searchForm
      const params = {
        mobile,
        create_time_start: time[0] && this.$moment(time[0]).format('YYYY-MM-DD'),
        create_time_end: time[1] && this.$moment(time[1]).format('YYYY-MM-DD'),
        size: this.pageSize,
        page: this.currentPage,
        sort: this.sort
      }
      this.loading = true
      this.getInitData(params).then(res => {
        const { list, total } = res
        this.tableData = list
        this.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleReset () {
      this.searchForm = {
        mobile: '',
        time: ['', '']
      }
    }
  }
}
</script>
<style lang="less">
  .bets-manage {
    .sai-guo {
      .sai-guo-div {
        border-bottom: 1px solid #ebeef5;
      }
      .sai-guo-div:last-child {
        border-bottom: none;
      }
    }
    .xiazhu-saicheng {
      text-align: left;
      .xiazhu-saicheng-span-2 {
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        padding: 0 5px;
        margin: 0 5px;
      }
    }
  }
</style>
